<style type='text/css'>
.wrapper {
  width:205px;margin:-80px auto;
  background:rgba(20,20,20,.3);
  padding:20px;border:1px solid #ccc;}

#list {
  top:0;z-index:-10;
  background:rgba(250,200,0,1);
  width:3px;text-align:left;}

ul{list-style:none;width:200px;text-align:left;}
#list {margin:5px;display:none;}
#list a {
  color:#999;paddingt:10px;
  margin:0 0 0 -25px;
  text-shadow:0px 0px 5px black;
  -o-transition: all .3s;
  -moz-transition: all .3s;
  -webkit-transition: all .3s;
  -ms-transition: all .3s;
  transition: all .3s;}

#list a:hover {
  color:rgba(250,200,0,1);
  text-shadow:0px 0px 5px black;
  font:bold italic medium Georgia;}

.top-menu a{
  z-index:10;margin:0px;padding:2px;
  line-height:40px;color:#999;
  text-shadow:0px 0px 5px black;
  border-top:2px solid rgba(250,200,0,1);
  border-bottom:2px solid rgba(250,200,0,1);
  font-size:20px;border-radius:5px;}

a:hover,focus{color:rgba(250,200,0,1);}
.pic{position:relative;}
img {
  overflow:hidden;margin-top:10px;
  border:1px solid #ccc;width:205px;}

img:hover ~ .text {opacity:1;}
img:hover {border:1px solid rgba(250,200,0,1);border-radius:5px;}
.text {
  position:absolute;color:#ccc;
  font-size:16px;margin:-3px auto;
  transition:all 0.5s ease;
  opacity:0;display:block;
  -o-transition: all .3s;
  -moz-transition: all .3s;
  -webkit-transition: all .3s;
  -ms-transition: all .3s;
  transition: all .3s;}
</style>